<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

<head th:include="templates/common :: header" />

<body>

	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu" ></div>	
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'grades.create.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'grades.create.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'grades.update.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'grades.update.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'grades.delete.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>	
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'grades.delete.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>	
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'grades.not.found'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'grades.exists'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		        
		<form id="gradesBrowsingForm" action="#" th:object="${userSubjectsGroupsSelection}" th:action="@{/grades/show}" method="post" class="form-inline">
			<table class="table table-striped table-bordered">				
	            <tbody>
	            	<tr>
	                	<td style="text-align: center !important; width:25%;">
	                		<label class="control-label" th:text="#{groups.label}"/>
	                		<select id="allGroups" th:field="*{selectedGroup}" class="chzn-select btn-block">
								<option th:each="group : ${allGroups}" th:value="${group.id}" th:text="${group.groupName + '('+ group.numericGroupName+')'}">Access Type 1</option>
							</select>
	                    </td>
	                    <td style="text-align: center !important; width:25%;">
	                    	<label class="control-label" th:text="#{subjects.label}"/>
	                    	<select id="subjectsInGroup" th:field="*{selectedSubject}" class="chzn-select btn-block">
	                    		<option th:each="subject : ${subjects}" th:value="${subject.id}" th:text="${subject.subjectName}">Access Type 1</option>
                    		</select>		
	                    </td>
	                	<td style="text-align: center !important; width:25%;vertical-align: middle;">
	                		<button id="sumbitSearch" type="submit" class="btn btn-primary" th:inline="text"> 
								<i class="glyphicon glyphicon-search" style="margin-right:5px;"/>[[#{app.browse}]]
							</button>
							<div class="btn-group">
							 	<button type="button" class="btn btn-primary" th:text="#{grades.create}"/>
							  	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
							    	<span class="caret"></span>
							    	<span class="sr-only" />
							    </button>
							  	<ul class="dropdown-menu" role="menu">
							    	<li><a th:href="@{/grades/create/partial}" th:inline="text">[[#{grades.create.partial}]]</a></li>
							    	<li><a th:href="@{/grades/create/final}" th:inline="text">[[#{grades.create.final}]]</a></li>
							  	</ul>
							</div>
	                    </td>
	                </tr>
	        	</tbody>
	        </table>
        </form>		
       
		<table th:if="${not #lists.isEmpty(partialGradesDTO) AND #lists.isEmpty(finalGradesDTO)}" class="table table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th scope="col" style="text-align: center !important;" th:text="#{grades.table.fullname}"/>
					<th scope="col" style="text-align: center !important;" th:text="#{grades.table.grade.partial}" th:attr="colspan=${maxGrades+1}"/>					
				</tr>
			</thead>
			<tbody>
				<tr th:each="user : ${gradesForUsers}">
					<td th:text="${user.fullName}" style="text-align: center; vertical-align: middle;"></td>
					<td th:each="grade : ${user.partialGrades}" style="text-align: center; vertical-align: middle;" th:inline="text">
						<span th:text="${grade.grade}"/>			
						<a th:if="${not #strings.isEmpty(grade.grade)}" class="btn btn-primary btn-xs" href="#modalEdit" th:href="@{/grades/edit/partial/__${grade.id}__}"> 
 							<i class="icon-white glyphicon glyphicon-pencil" style="margin:0px !important;padding: 0px 0px !important;"/> 
 						</a> 
 						<a th:if="${not #strings.isEmpty(grade.grade)}" class="btn btn-danger btn-xs" href="#" th:href="@{/grades/delete/partial/__${grade.id}__}">
							<i class="glyphicon glyphicon-remove icon-white" style="margin:0px !important;padding: 0px 0px !important;"/>
						</a> 
					</td>					
				</tr>
			</tbody>
		</table>		
		<table th:if="${not #lists.isEmpty(finalGradesDTO)}" class="table table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th scope="col" style="text-align: center !important;" th:text="#{grades.table.fullname}"/>
					<th scope="col" style="text-align: center !important;" th:text="#{grades.table.grade.partial}" th:attr="colspan=${maxGrades}"/>
					<th scope="col" style="text-align: center !important;" th:text="#{grades.table.grade.final}"/>
					
				</tr>
			</thead>
			<tbody>
				<tr th:each="user : ${gradesForUsers}"> 
					<td th:text="${user.fullName}" style="text-align: center; vertical-align: middle;"></td>
					<td th:if="${#lists.isEmpty(partialGradesDTO) AND not #lists.isEmpty(finalGradesDTO)}"></td>
					<td th:each="grade : ${user.partialGrades}" style="text-align: center; vertical-align: middle;" th:inline="text">
						<span th:text="${grade.grade}"/>			
						<a th:if="${grade.grade}" class="btn btn-info btn-xs" th:title="${grade.getDescription()}"> 
 							<i class="icon-white glyphicon glyphicon-info-sign" style="margin:0px !important;padding: 0px 0px !important;"/> 
 						</a> 	
						<a th:if="${grade.grade}" class="btn btn-primary btn-xs" href="#modalEdit" th:href="@{/grades/edit/partial/__${grade.id}__}"> 
 							<i class="icon-white glyphicon glyphicon-pencil" style="margin:0px !important;padding: 0px 0px !important;"/> 
 						</a> 
 						<a th:if="${not #strings.isEmpty(grade.grade)}" class="btn btn-danger btn-xs" href="#" th:href="@{/grades/delete/partial/__${grade.id}__}">
							<i class="glyphicon glyphicon-remove icon-white" style="margin:0px !important;padding: 0px 0px !important;"/>
						</a> 
					</td>
					<td th:each="grade : ${user.finalGrades}" style="text-align: center; vertical-align: middle;" th:inline="text">
						<span th:text="${grade.grade}"/>			
						<a th:if="${grade.grade}" class="btn btn-info btn-xs" th:title="${grade.getDescription()}"> 
 							<i class="icon-white glyphicon glyphicon-info-sign" style="margin:0px !important;padding: 0px 0px !important;"/> 
 						</a> 
						<a th:if="${not #strings.isEmpty(grade.grade)}" class="btn btn-primary btn-xs" href="#modalEdit" th:href="@{/grades/edit/final/__${grade.id}__}"> 
 							<i class="icon-white glyphicon glyphicon-pencil" style="margin:0px !important;padding: 0px 0px !important;"/> 
 						</a> 
 						<a th:if="${not #strings.isEmpty(grade.grade)}" class="btn btn-danger btn-xs" href="#" th:href="@{/grades/delete/final/__${grade.id}__}">
							<i class="glyphicon glyphicon-remove icon-white" style="margin:0px !important;padding: 0px 0px !important;"/>
						</a> 
					</td>
				</tr>
			</tbody>
		</table>		
	</div>	
	
	
	<script type="text/javascript"> 	
		$(document).ready(function() {
	    	$('.chzn-select').select2({});	   
	 	});
	</script>	
</body>
</html>